<script setup>
import {reactive, ref} from "vue";
import {Iphone, Lock, User} from "@element-plus/icons-vue";
import SvgIcon from "@/components/iconfont/SvgIcon.vue";
import {ElMessage} from "element-plus";
import {GetRegisterAccount, GetRegisterCode} from "@/api/index.js";
import {encryptionData} from "@/utils/encrypt_aes.js";
import {useRouter} from "vue-router";
const router = useRouter();
const ruleForm = reactive({
  username: "",
  password: "",
  mobile: "",
  email: "",
  code: "",
});
const ruleFormRef = ref();
// 对数据进行校验
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      message: "密码长度不能少于6位",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur",
    },
    {
      min: 11,
      max: 11,
      message: "手机号码位数不正确！",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
    {
      min: 4,
      max: 4,
      message: "验证码长度为4位",
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱地址",
      trigger: "blur",
    },
    {
      type: 'email',
      message: "请输入正确的邮箱地址",
    }
  ],

});
//校验手机验证码
function validatePhoneNumber(phoneNumber) {
  const reg = /^1[3-9]\d{9}$/;
  return reg.test(phoneNumber);
}
const handleGetCode = async()=>{
  try {
    if (ruleForm.mobile && validatePhoneNumber(ruleForm.mobile)){
      const res = await GetRegisterCode({mobile:ruleForm.mobile})
      res.status===200?ElMessage.success(res.msg):ElMessage.error(res.msg)
    }else if(!ruleForm.mobile){
        ElMessage.warning('手机号未输入，无法发送验证码！')
    }else{
      ElMessage.warning('手机号格式不正确，请重新输入！')
    }
  }catch (error){
    ElMessage.error("获取验证码失败，请稍后重试！");
  }
}
//校验数据
const submitForm = async (ruleFormRef) => {
  if (!ruleFormRef) return ;
  await ruleFormRef.validate(async (valid) => {
    if (valid) {
      await handleGetRegisterAccount()
    }
  })
}
const handleGetRegisterAccount = async () =>{
  ruleForm.password = encryptionData(ruleForm.password)
  try {
    const res = await GetRegisterAccount(ruleForm)
    if( res.status===201){
      await router.push('/login')
      ElMessage.success(res.msg)
    }
    else{
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('网络出错，请稍后注册！')
  }
}
</script>

<template>
  <div class="login">
    <div class="form-container">
      <h2>注册页</h2>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-icon color="#409efc" :size="30">
            <User/>
          </el-icon>
          <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-icon color="#409efc" :size="30">
            <Lock/>
          </el-icon>
          <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item style="width: 365px" prop="mobile">
          <el-icon color="#409efc" :size="30">
            <Iphone/>
          </el-icon>
          <el-input type="text" v-model="ruleForm.mobile" placeholder="请输入你的手机号码..."/>
        </el-form-item>
        <el-form-item style="width: 365px" prop="email">
          <el-icon size="30px" color="#409efc">
            <SvgIcon iconName="icon-youxiang"/>
          </el-icon>
          <el-input type="text" v-model="ruleForm.email" placeholder="请输入你的QQ邮箱..."/>
        </el-form-item>
        <el-form-item prop="code">
          <el-icon size="30px" color="#409efc">
            <SvgIcon iconName="icon-yanzhengma"/>
          </el-icon>
          <el-input type="text" style="width: 157px" v-model="ruleForm.code" placeholder="请输入你的验证码..."/>
          <el-button type="primary" style="margin-left: 10px" @click="handleGetCode">点击获取</el-button>
        </el-form-item>
        <p class="register-link-box">
          <router-link to="/login" class="register-link">已有账号？点击登录</router-link>
        </p>
        <el-form-item id="button">
          <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/img/background.png");
  /*将元素的定位方式设为固定定位，使其相对于浏览器窗口固定位置，不随页面滚动而移动*/
  position: fixed;
  background-size: 100% 100%;
  align-content: center;
}

.form-container {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #1d3043;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  border-radius: 14px;

  h2 {
    padding: 20px 200px 0 200px;
    font-size: 30px;
    color: #928383;
    margin: 0 0 0 0;
  }

  .el-form {
    margin-top: 30px;
    margin-left: 30px;

    .el-form-item {
      margin-top: 40px;

      .el-input {
        width: 300px;
      }
    }

    .code {
      .el-input {
        width: 190px;
      }

      img {
        width: 100px;
        height: 32px;
        margin-left: 10px;
      }
    }

    #button {
      .el-button {
        width: 365px;
      }
    }
  }

  .register-link-box {
    display: flex;
    margin: 20px 20px 10px 20px;

    .register-link {
      color: #409EFF;
      font-size: 20px;
    }
  }
}
</style>